<template>
  <div class="order-lists">
    <el-row :gutter="20">
      <el-col :span="6" :key="index" v-for="(item,index) in allListData">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span style="color:#666;font-weight:bold;">{{item.title}}</span>
            <div class="list-status" :class="item.listStatus">{{item.listStatusWord}}</div>
          </div>
          <div class="item text">
            <div class="list-num">{{item.listNum}}</div>
            <div style="overflow:hidden;">
              <div class="list-type">{{item.listType}}</div>
              <div class="rate" :class="item.crease">
                {{item.rate}}
                <el-icon></el-icon>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <div ref="list-column-diagram" id="list-column-diagram"></div>
  </div>
</template>

<script>
import Message from "element-ui";
import Echarts from "echarts";
export default {
  data() {
    return {
      allListData: [
        {
          title: "订单",
          listStatus: "primary",
          listStatusWord: "待",
          listNum: 1,
          listType: "代发货",
          // 较昨日增长或者减少百分比
          rate: "",
          crease: ""
        },
        {
          title: "订单",
          listStatus: "danger",
          listStatusWord: "急",
          listNum: 1,
          listType: "退换货",
          // 较昨日增长或者减少百分比
          rate: "",
          crease: ""
        },
        {
          title: "商品",
          listStatus: "danger",
          listStatusWord: "急",
          listNum: 0,
          listType: "库存预警",
          // 较昨日增长或者减少百分比
          rate: "",
          crease: ""
        },
        {
          title: "代提现",
          listStatus: "danger",
          listStatusWord: "待",
          listNum: 0,
          listType: "代提现",
          // 较昨日增长或者减少百分比
          rate: "",
          crease: ""
        },
        {
          title: "订单",
          listStatus: "primary",
          listStatusWord: "昨",
          listNum: 3,
          listType: "昨日支付订单数",
          // 较昨日增长或者减少百分比
          rate: "0%",
          crease: ""
        },
        {
          title: "交易",
          listStatus: "primary",
          listStatusWord: "昨",
          listNum: 3,
          listType: "昨日交易额",
          // 较昨日增长或者减少百分比
          rate: "82.03%",
          crease: "el-icon-bottom"
        },
        {
          title: "粉丝",
          listStatus: "primary",
          listStatusWord: "今",
          listNum: 92,
          listType: "今日新增粉丝",
          // 较昨日增长或者减少百分比
          rate: "18%",
          crease: "el-icon-top"
        },
        {
          title: "粉丝",
          listStatus: "primary",
          listStatusWord: "月",
          listNum: 546,
          listType: "本月新增粉丝",
          // 较昨日增长或者减少百分比
          rate: "308%",
          crease: "el-icon-bottom"
        }
      ]
    };
  },
  methods: {
    // 画柱形图
    drawColumnDiagram() {
      var myChart = Echarts.init(
        document.getElementById("list-column-diagram")
      );
      var option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999"
            }
          }
        },
        toolbox: {
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ["line", "bar"] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        legend: {
          data: ["订单金额", "订单数", "总数"]
        },
        xAxis: [
          {
            type: "category",
            data: [
              "1月",
              "2月",
              "3月",
              "4月",
              "5月",
              "6",
              "7月",
              "8月",
              "9月",
              "10月",
              "11月",
              "12"
            ],
            axisPointer: {
              type: "shadow"
            }
          }
        ],
        yAxis: [
          {
            type: "value",
            name: "水量",
            min: 0,
            max: 250,
            interval: 50,
            axisLabel: {
              formatter: "{value} ml"
            }
          },
          {
            type: "value",
            name: "温度",
            min: 0,
            max: 25,
            interval: 5,
            axisLabel: {
              formatter: "{value} °C"
            }
          }
        ],
        series: [
          {
            name: "订单金额",
            type: "bar",
            data: [
              2.0,
              4.9,
              7.0,
              23.2,
              25.6,
              76.7,
              135.6,
              162.2,
              32.6,
              20.0,
              6.4,
              3.3
            ]
          },
          {
            name: "订单数",
            type: "bar",
            data: [
              2.6,
              5.9,
              9.0,
              26.4,
              28.7,
              70.7,
              175.6,
              182.2,
              48.7,
              18.8,
              6.0,
              2.3
            ]
          },
          {
            name: "总数",
            type: "line",
            yAxisIndex: 1,
            data: [
              2.0,
              2.2,
              3.3,
              4.5,
              6.3,
              10.2,
              20.3,
              234,
              23.0,
              16.5,
              12.0,
              6.2
            ]
          }
        ]
      };
      myChart.setOption(option);
    },
    // 登出成功发送一个事件改变登录的状态
    amendLogin () {
      this.$store.commit('amendLogin')
    }
  },
  mounted() {
    this.drawColumnDiagram();
  },
  updated() {}
};
</script>

<style scoped lang="less">
.order-lists {
  width: 90%;
  margin-left: 5%;
  padding-right: 5%;
}
.order-list {
  width: 90%;
}
.list {
  float: left;
}
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.box-card {
  margin: 10px 0;
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.list-status {
  float: right;
  border-radius: 4px;
}
.list-status.primary {
  width: 24px;
  height: 18px;
  background: #409eff;
  line-height: 18px;
  text-align: center;
  color: #fff;
  font-size: 12px;
}

.list-status.danger {
  width: 24px;
  height: 18px;
  background: #d9534f;
  line-height: 18px;
  text-align: center;
  color: #fff;
  font-size: 12px;
}
.list-num {
  font-size: 30px;
  color: #666;
}
.list-type {
  float: left;
  color: #666;
  font-size: 12px;
}
.rate {
  float: right;
  font-size: 12px;
  color: #0092dc;
  font-weight: bold;
  .el-icon-bottom {
    font-weight: bold;
    font-size: 14px;
  }
}
.rate.el-icon-top {
  color: #d9534f;
}
#list-column-diagram {
  width: 100%;
  height: 500px;
}
</style>
